<template>
  <div>
    <div class="file-list-view" v-if="fileList">
      <template v-for="item in fileList">
        <div class="file-item">
          <div class="file-name">
            {{item?.name}}
            <div style="font-size: 12px">
              <el-progress
                  v-if="item.state !== 0"
                  :status="item.percentage === 100?'success': 'primary'"
                  :percentage="item.percentage"><span></span>
              </el-progress>
              <span v-else>文件解析中....</span>
            </div>
          </div>
          <div class="file-percent" :class="[item.percentage===100?'percent':'']">
            <svg v-if="item.percentage===100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path><path fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"></path></svg>
            {{item.percentage}}%
          </div>
          <!-- 必须解析完才能暂停，不然是没有接口取消调用的 -->
          <div
              class="file-btn warning"
              @click="pauseUpload(item)"
              v-if="[2].includes(item.state) && item.percentage !== 100">
            <span>暂停</span>
          </div>
          <!-- 暂停中显示的继续按钮 -->
          <div
              class="file-btn primary"
              @click="resumeUpload(item)"
              v-if="[3, 5].includes(item.state)">
            <span>继续</span>
          </div>
          <div v-if="item.percentage !== 100" class="file-btn warning" @click="cancelSingle(item)"><span>取消</span></div>
          <div v-else title="移除列表" class="file-icon" @click="handleRemoveFile(item)">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32zm448-64v-64H416v64zM224 896h576V256H224zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32m192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32"></path></svg>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {ElProgress} from "element-plus";

const props = defineProps({
  modelValue: [Object, Array],
  isInUpdate: Number,
  multiple: Boolean,
})
const fileList = ref([])
watch(() => props.modelValue, (value) => {
  if (value) {
    fileList.value = props.multiple ? value : [value]
  } else fileList.value = []
},{immediate:true})
watch(() => props.isInUpdate, () => {
  if (props.modelValue) {
    fileList.value = props.multiple ? props.modelValue : [props.modelValue]
  } else fileList.value = []
})
const emit = defineEmits(['onRemove', 'pauseUpload', 'resumeUpload', 'cancelSingle'])
const handleRemoveFile = (row) => {
  emit('onRemove', row)
}
// 暂停
const pauseUpload = (item) => {
  emit('pauseUpload', item)
}
// 继续上传
const resumeUpload = (item) => {
  emit('resumeUpload', item)
}
// 取消
const cancelSingle = (item) => {
  emit('cancelSingle', item)
}
// 显示文件大小
const fileSize = (val) => {
  const m = 1024 * 1024
  if (val > m) {
    const num = Math.ceil(val / m)
    const numB = Math.ceil(num / 1024)
    if (numB > 1) {
      return `${numB}G`
    } else {
      return `${num}M`
    }
  } else {
    const numC = Math.ceil(val / 1024)
    return `${numC}KB`
  }
}
</script>
<style scoped>
.file-list-view {
  max-height: 500px;
  overflow-y: auto;
}

.file-list-view::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.file-list-view::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: rgba(43, 87, 154, 1);
}

.file-item {
  padding: 4px 0;
  display: flex;
  gap: 4px;
}
.file-item:nth-child(even){
  background-color: rgba(13,132,255, 0.1);
}
.file-item:nth-child(odd){
  background-color: #F6F6F6;
}
.file-name {
  flex: 1;
  color: rgba(13,132,255, 1);
  padding: 10px;
}
.file-percent svg {
  width: 18px;
}
.file-percent {
  max-width: 70px;
  color: rgba(13,132,255, 1);
  display: flex;
  align-items: center;
}

.file-icon {
  color: #F32323;
  width: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.file-btn {
  display: flex;
  align-items: center;
}
.file-btn span {
  background-color: #F32323;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.file-btn.warning span{
  background-color: rgba(231, 77, 0, 1);
}
.file-btn.warning span:active {
  background-color: rgba(231, 77, 0, 1);
}
.file-btn.warning span:hover {
  background-color: rgba(231, 77, 0, 0.8);
}
.file-btn.primary span{
  background-color: rgba(13, 132, 255, 1);
}
.file-btn.primary span:active {
  background-color: rgba(13, 132, 255, 1);
}
.file-btn.primary span:hover {
  background-color: rgba(13, 132, 255, 0.8);
}
</style>
